<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'我的专利集'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="index" :style="['padding: 0 28rpx;']">
    <!-- 全部委托 -->
    <view class="entrustAll">
      <text class="entAllTitle">全部专利集</text>
      <view class="newEnt" @click="newEditDataList">
        <view class="iconfont icon--jia"></view>新建专利集</view
      >
    </view>
    <!-- 展示列表 -->
    <view class="serchItem" v-for="(item, index) in dataList" :key="index">
      <image class="serchItemImg" :src="img + item.img" />
      <view @click="toAddMyDataList(item.ID)">
        <view class="patentTitle1">{{ item.name }}</view>
        <view class="patentClassify"
          ><view class="partake" v-if="item.status == 1">已共享</view>
          <!-- {{ item.orderNum }}条， -->订阅{{ item.isOrder }}次</view
        >
      </view>
      <view
        @click="open(item.ID, item.status, item.name)"
        class="iconfont icon-a-13Bshenglve"
      ></view>
    </view>
    <!-- <view class="serchItem">
      <image class="serchItemImg" src="@/static/img/page/01.png" mode="scaleToFill" />
      <view @click="toAddMyDataList()">
        <view class="patentTitle1">最全专利最全专利最全专利最全专利最全专利最全专利</view>
        <view class="patentClassify">11条，订阅200次</view>
      </view>
      <view class="iconfont icon-a-13Bshenglve" @click="open"></view>
    </view> -->
  </view>
  <!-- 弹窗 -->
  <uni-popup ref="popup" type="bottom" :mask-click="true" :safe-area="true">
    <view class="dataList">
      <view class="addItemTitle">专利集名称</view>
      <!-- <view class="fenxiang">
        <text class="iconfont icon-zhuanfa"></text>
        <view @click="addDataList">分享</view>
      </view> -->
      <view class="fenxiang">
        <text class="iconfont icon-lianjie"></text>
        <view @click="upDataItem">{{ status == 1 ? "取消共享" : "共享" }}</view>
      </view>
      <view class="fenxiang">
        <text class="iconfont icon-bianjisekuai"></text>
        <view @click="toEditDataList">编辑</view>
      </view>
      <view class="fenxiang">
        <text class="iconfont icon-huishouzhan_huaban"></text>
        <view @click="dialogToggle()">删除</view>
      </view>
    </view>
  </uni-popup>
  <!-- 确认删除 -->
  <uni-popup ref="alertDialog" type="bottom" :is-mask-click="false">
    <view class="dataList1">
      <view class="addItemTitle1">
        <view class="contacts1">确认删除</view>
        <view class="loginInfo1">是否确定删除当前专利集？</view>
        <view class="affirm1">
          <view class="" @click="deleteItem(true)">取消</view>
          <view class="solid1" @click="deleteItem(false)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 新建专利集 -->
  <uni-popup ref="popup1" type="bottom" :is-mask-click="false">
    <view class="dataList3">
      <view class="addItemTitle3">
        <view class="contacts3">新建专利集</view>
        <view class="loginInfo3">
          <input
            maxlength="20"
            v-model="addData.name"
            type="text"
            placeholder="输入新建专利集标题"
          />
          <view @click="crearName"
            ><text>{{ 20 - addData.name.trim().length }}</text>
            <view class="iconfont icon-closel"></view
          ></view>
        </view>
        <view class="affirm3">
          <view class="" @click="addDataList(false)">取消</view>
          <view class="solid3" @click="addDataList(true)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="操作成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message" type="message" :safe-area="true">
    <uni-popup-message
      type="error"
      message="默认专利集无法被编辑！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message3" type="message" :safe-area="true">
    <uni-popup-message
      type="error"
      message="共享专利集无法被编辑！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message2" type="message" :safe-area="true">
    <uni-popup-message
      type="error"
      message="共享后不能被删除！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message1" type="message">
    <uni-popup-message
      type="error"
      message="当前专利集未添加专利，请添加专利后共享！"
      :duration="2000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { onMounted, inject, reactive, toRefs, ref } from "vue";
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const $url = inject("$url");
const $imgSrc = inject("$imgSrc");
let data = reactive({
  dataList: [],
  page: 1,
  userInfo: {},
  itemId: "",
  status: 0,
  addData: {
    name: "",
    desc: "",
    img: "",
  },
  img: "",
  imgList: [
    "/uploads/file/system01.png",
    "/uploads/file/system02.png",
    "/uploads/file/system03.png",
  ],
});
let popup = ref();
let popup1 = ref();
let success = ref();
let message = ref();
let message1 = ref();
let message2 = ref();
let message3 = ref();
let alertDialog = ref();
let { dataList, addData, status, img } = toRefs(data);
onShow(() => {
  data.page = 1
  data.img = $imgSrc;
  data.dataList = [];
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (res.token?.length < 1) {
        uni.navigateTo({
          url: "/pages/login/login?type=1",
        });
      }
      data.userInfo = res.data;
      updataList();
    },
  });
});
onPullDownRefresh(() => {
  data.page = 1;
  data.dataList = [];
  updataList();
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  data.page = data.page + 1;
  updataList();
});
const newEditDataList = () => {
  popup1.value.open();
};
const updataList = () => {
  uni.request({
    url:
      $url +
      `/zlGroup/getZlGroupList?page=1&pageSize=10&status=3&userId=${data.userInfo.ID}`,
    method: "GET",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      res.data.data.list.map((item) => {
        data.dataList.push(item);
      });
    },
  });
};
const toEditDataList = () => {
  popup.value.close();
  if (data.status == 1) {
    message3.value.open();
    return;
  }
  uni.navigateTo({
    url: `/pages/personal/myDataList/editDataList/index?id=${data.itemId}`,
  });
};
const dialogToggle = () => {
  alertDialog.value.open("button-text");
};
const open = (id, status, name) => {
  if (name == "默认专利集") {
    message.value.open();
    return;
  }
  data.itemId = id;
  data.status = status;
  popup.value.open("button-text");
};
const deleteItem = (bool) => {
  if (bool) {
    alertDialog.value.close();
  } else {
    if (data.status == 1) {
      message2.value.open();
      alertDialog.value.close();
      popup.value.close();
      return;
    }
    uni.request({
      url: $url + `/zlGroup/deleteZlGroup`,
      method: "DELETE",
      timeout: 6000,
      header: {
        "x-token": data.userInfo.token,
      },
      data: {
        id: data.itemId,
      },
      fail: (err) => {
        console.log(err, "请求失败！");
      },
      success(res) {
        data.dataList = [];
        updataList();
        alertDialog.value.close();
        success.value.open();
        popup.value.close();
      },
    });
  }
};
const upDataItem = () => {
  uni.request({
    url: $url + `/base/getZlCollectList?page=1&pageSize=10&groupId=${data.itemId}`,
    method: "GET",
    timeout: 6000,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      if (res.data.data.list.length == 0) return message1.value.open();
      uni.request({
        url: $url + `/zlGroup/shelf`,
        method: "PUT",
        timeout: 6000,
        header: {
          "x-token": data.userInfo.token,
        },
        data: {
          ids: [data.itemId],
          status: data.status == 1 ? 0 : 1,
        },
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          data.dataList = [];
          updataList();
          alertDialog.value.close();
          success.value.open();
          popup.value.close();
        },
      });
    },
  });
};
const crearName = () => {
  data.addData.name = "";
};
const addDataList = (bool) => {
  if (bool) {
    if (data.addData.name.trim().length == 0) return;
    data.addData.img = data.imgList[Math.floor(Math.random() * 3)];
    uni.request({
      url: $url + `/zlGroup/createZlGroup`,
      method: "POST",
      timeout: 6000,
      data: data.addData,
      header: {
        "x-token": data.userInfo.token,
      },
      fail: (err) => {
        console.log(err, "请求失败！");
      },
      success(res) {
        data.addData.name = "";
        data.page = 1;
        data.dataList = [];
        updataList();
        popup1.value.close();
        success.value.open();
      },
    });
  } else {
    popup1.value.close();
  }
};
const toAddMyDataList = (id) => {
  uni.navigateTo({ url: `/pages/personal/myDataList/addMyDataList/index?id=${id}` });
};
</script>

<style scoped>
.index {
  padding-bottom: 55rpx;
}
.entrustAll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
  margin-bottom: 32rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #666;
}
.entAllTitle {
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.entrustAll .iconfont {
  border-radius: 50%;
  border: #666 1rpx solid;
  margin-right: 15rpx;
  font-size: 20rpx;
  padding: 8rpx;
}
.newEnt {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 展示列表 */
.serchItem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 27rpx;
}
.serchItemImg {
  margin-right: 16rpx;
  width: 109rpx;
  height: 109rpx;
  background: #d8d8d8;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 11rpx;
}
.patentTitle1 {
  margin-top: 7rpx;
  width: 475rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentClassify {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 9rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
.dataList {
  padding-bottom: 1rpx;
  width: 100%;
  background: #ffffff;
  border-radius: 11rpx 11rpx 0rpx 0rpx;
}
.addItemTitle {
  display: flex;
  align-items: center;
  padding-left: 27rpx;
  margin-bottom: 24rpx;
  height: 108rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
  border-bottom: 1rpx solid #dfdfdf;
}
.fenxiang {
  display: flex;
  align-items: center;
  padding-left: 29rpx;
  margin-bottom: 47rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.fenxiang text {
  color: #666666;
}
.fenxiang view {
  margin-left: 45rpx;
}
.partake {
  margin-right: 5rpx;
  width: 92rpx;
  height: 27rpx;
  background: #1677ff;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 7rpx;
  font-size: 22rpx;
  text-align: center;
  line-height: 27rpx;
  font-weight: 400;
  color: #ffffff;
}

.dataList3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle3 {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 57rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.ctsInput3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16rpx;
  margin: 32rpx 21rpx 0 21rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.affirm3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm3 view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid3 {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
.loginInfo3 {
  display: flex;
  align-items: center;
  padding: 19rpx 20rpx !important;
  margin: 0 30rpx;
  color: #999999;
  margin-bottom: 70rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  font-size: 25rpx;
}
.loginInfo3 view {
  display: flex;
  align-items: center;
}
.loginInfo3 input {
  flex: 1;
}
.dataList1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle1 {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.affirm1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm1 view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid1 {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
.loginInfo1 {
  margin: 30rpx;
}
</style>
